interface itenType{
    img:string,
    id:string,
    title:string,
    desc:string,
    // map:any
}
interface ArraType{
    data:itenType[],
    code:number,
    
}
Ajax('/api/data',(res:ArraType)=>{
    render(res.data)
})

const render=(data:itenType[],)=>{
    
    // console.log(data)
    
    const Dowrap:Element|null=document.querySelector('.wrap');
    
    (Dowrap as Element).innerHTML=data.map((v,i)=>{
        return `
               
                <dl id=${v.id}>
                <dt>
                    <img src=${v.img} alt="" />
                </dt>
                <dd>
                    <p><b>${v.title}</b></p>
                </dd>
                </dl>
               `
    }).join('')
    Bint()
}
const Bint=()=>{
    const dls=Array.from(document.querySelectorAll('dl'))
    // console.log(dls)
    dls.forEach(item=>{
        item.addEventListener('click',()=>{
            location.href=`/detail.html?id=${item.id}`
        })
    })
}

const seach:Element|null=document.querySelector('.seach');
const inp:Element|any=document.querySelector('.inp');
inp?.addEventListener('input',()=>{
    let value=inp.value.trim()
   if(value!==''){
    Ajax(`/api/seach?value=${value}`,(resd:ArraType)=>{
       render(resd.data)
   })
   }else{
    Ajax('/api/data',(res:ArraType)=>{
        render(res.data)
  })
   }
})